<template>
	<view class="flex_row" style="width: 100vw;height: 100vh;overflow: hidden;">
		<view style="flex: 3;height: 100%;" :class="open?'flex_row':'allCenter'">
			<image v-if="!open" src="../../image/twylt1/homeIcon/logo.png" style="width: 12vh;height: 12vh;">
			</image>
			<view v-if="open" style="padding: 1.1rem 0.5rem;width:37vh;" class="flex_column">
				<view style="text-align: center;">
					<image style="height: 3vh;" mode="heightFix" src="../../image/icon/up.png"></image>
				</view>
				<scroll-view style="overflow: hidden;flex: 1;" scroll-y="true">

					<view class="flex_row_between flex_wrap">
						<view style="width: 15vh;" v-for="(list,index) in list" class="flex_col margin_top14"
							@click="select(index)">
							<view style="position: relative;top:0;left:0">
								<view
									style="position: absolute;top: 0;left: 0;overflow: hidden;width: 14vh;height: 14vh;">
									<image :src="list.src1 ? list.src1 : list.src" style="width: 100%;" mode="widthFix">
									</image>
								</view>
							</view>
							<image v-if="selIndex==index" src="../../image/cjymicon/xztwsst.png" style="width: 100%;"
								mode="widthFix">
							</image>
							<image v-else src="../../image/cjymicon/thumb.png" style="width: 100%;" mode="widthFix">
							</image>
							<view class="rem03 allCenter margin_top10" style="color: #FFF;">{{ list.name }}</view>
						</view>
					</view>

				</scroll-view>
				<view style="text-align: center;">
					<image style="height: 3vh;" mode="heightFix" src="../../image/icon/down.png"></image>
				</view>
			</view>
			<view v-if="open" style="padding: 1.5rem 0.5rem;flex: 1;" class="flex_column">
				<view class="rem03 flex_row alignCenter" style="justify-content: flex-end;width: 100%;flex-shrink: 0;">
					方淑彤 | 女
				</view>
				<!-- <image :src="imgsrc" style="width: 100%;flex:1"    mode="aspectFit"> </image> -->
				<!-- <video src="rtsp://192.168.2.123/cam/realmonitor?channel=1&subtype=0" controls></video> -->
				<!-- <video id="jk" :src="videourl" controls></video> -->
				<view class="v-box" id="box" style="display:inline-block;">
					<video id="jk" ref="jk" src="rtsp://192.168.2.123/cam/realmonitor?channel=1&subtype=0"
						:style="'opacity: ' +  vstatus ? '1' : '0'" :show-fullscreen-btn="false" :show-play-btn="false"
						style="" autoplay="true" controls="false" direction="-90"></video> 
				</view>
			</view>
		</view>
		<view style="flex: 1;height: 100%;background: #1E2238;" class="flex_column">
			<page-head></page-head>
			<view class="flex_row" style="justify-content: flex-end;padding-right: 4vh;">
				<image v-if="music" @click="music=false" src="../../image/dbbtn/opensound.png"
					style="width: 8vh;height: 8vh;" class=" between_padding">
				</image>
				<image v-else @click="music=true" src="../../image/dbbtn/closeSound.png" style="width: 8vh;height: 8vh;"
					class=" between_padding">
				</image>
				<image @click="back" src="../../image/dbbtn/back.png" style="width: 8vh;height: 8vh;"
					class=" between_padding">
				</image>
				<image @click="navigateTo('/pages/gnsz/gnsz')" src="../../image/dbbtn/set.png"
					style="width: 8vh;height: 8vh;" class=" between_padding">
				</image>
			</view>
			<view style="height: 8vh;"></view>
			<view class="flex_column" style="padding: 0 5vh;">
				<image v-if="!open" src="../../image/cjymicon/kqjt.png" @click="switchBtn" mode="widthFix"
					style="width: 100%;">
				</image>
				<image v-if="open" src="../../image/cjymicon/gbjt.png" @click="switchBtn" mode="widthFix"
					style="width: 100%;">
				</image>
				<image src="../../image/cjymicon/tiaojiao.png" mode="widthFix" style="width: 100%;margin-top: 8vh;">
				</image>
				<image src="../../image/cjymicon/caiji.png" @click="draw()" mode="widthFix"
					style="width: 100%;margin-top: 8vh;height: 98px;"></image>
				<!-- <view  class=" border_r10 " style="height: 9vh;margin-top: 8vh;">
             <button class="allCenter"
               style="color: #000000;background: #44CE7B;height: 100%; rem03">采集</button>
         </view> -->
				<view style="width: 100%;height: 8vh;margin-top: 8vh;" class="flex_row_between">
					<image @click="back" src="../../image/cjymicon/cancel.png" mode="widthFix" style="width: 40%;">
					</image>
					<image @click="gocjwc" src="../../image/cjymicon/done.png" mode="widthFix" style="width: 40%;">
					</image>
				</view>
			</view>
		</view>
		<view class="" :style="'left: ' + leftL + ';top: ' + topT + ';width: ' + widthW + ';height: ' + heightH"
			style="position: fixed;border: 1rpx soild #fff;font-size: 14rpx"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2244350016,3480840801&fm=15&gp=0.jpg',
				canvasH: '',
				canvasW: '',
				codes: "",
				img: '',
				test: '',
				widthW: '0px',
				heightH: '0px',
				leftL: '0px',
				topT: '0px',
				imageUrl: '',
				videoContent: '',
				vstatus: false,

				videourl: '',
				open: false,
				list: [{
					src: require('../../image/twylt1/jushouh.png'),
					src1: '',
					name: '举手后位',
					index: 0,
				}, {
					src: require('../../image/twylt1/jushouq.png'),
					src1: '',
					name: '举手前位',
					index: 1,
				}, {
					src: require('../../image/twylt1/cemiany.png'),
					src1: '',
					name: '侧面右位',
					index: 2,
				}, {
					src: require('../../image/twylt1/cemianz.png'),
					src1: '',
					name: '侧面左位',
					index: 3,
				}, {
					src: require('../../image/twylt1/houmianj.png'),
					src1: '',
					name: '后面举手位',
					index: 4,
				}, {
					src: require('../../image/twylt1/baotouq.png'),
					src1: '',
					name: '抱头前位',
					index: 5,
				},  
				],
				imgsrc: require('../../image/twylt1/jushouq.png'),
				src1: '',
				selIndex: 0,
				music: false,
			}
		},
	
		onLoad() {
			//加载的时候 把接口给的数据 渲染给vidoe
			// http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4
			// this.videourl =  uni.createVideoContext('jjk')  页面需要兼容 视频  进行兼容处理
			this.videourl = 'http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4';
			this.canvasH = uni.getSystemInfoSync().screenHeight
			this.canvasW = uni.getSystemInfoSync().screenWidth
		},
		created() {
		 // 创建视频实例指向视频控件
		 this.videoContext = uni.createVideoContext('jk');
		 console.log(this.videoContext)
		},
		

		mounted() {},
		onReady() {
			return ''
			const that = this;
			//防止切图成白屏
			setTimeout(function() {
				that.toImage();
			}, 1000);
		},
		methods: {

			pauseFun() {
				console.log('123')
			},
			toImage() {
				console.log(this.widthW, this.widthW);
				const that = this;
				var topT = this.topT;
				var leftL = this.leftL;
				var widthW = this.widthW;
				var heightH = this.heightH;
				/* 获取屏幕信息 */
				let ws = this.$mp.page.$getAppWebview();
				let bitmap = new plus.nativeObj.Bitmap('test');


				// 将webview内容绘制到Bitmap对象中
				ws.draw(
					bitmap,
					function(e) {
						/* 获取base64 */
						that.test = bitmap.toBase64Data();
						console.log(bitmap.toBase64Data());
						that.imageUrl = bitmap.toBase64Data()
						console.log(that.list[that.selIndex]);
						that.list[that.selIndex].src1 = bitmap.toBase64Data();
						/* 加载base64编码 */
						bitmap.loadBase64Data(
							bitmap.toBase64Data(),
							function() {
								console.log('加载Base64图片数据成功');
								/* 保存图片 */
								bitmap.save(
									'_doc/share.jpg', {},
									async (i) => {
											uni.createVideoContext('jk').play();
											console.log('保存图片成功：' + JSON.stringify(i));
											uni.saveImageToPhotosAlbum({
												filePath: i.target,
												success: function() {
													/* 清除 */
													bitmap.clear();
												},
												fail(e) {
													that.$refs.uToast.show({
														title: '保存失败' + e,
														type: 'error',
													})
												}
											});
										},
										function(e) {
											console.log('保存图片失败：' + JSON.stringify(e));
										}
								);
							},
							function() {
								console.log('加载Base64图片数据失败：' + JSON.stringify(e));
							}
						);
					},
					function(e) {
						console.log('截屏绘制图片失败：' + JSON.stringify(e));
					}, {
						check: true, // 设置为检测白屏
						// clip: {top: this.topT, left: this.leftL, height: this.heightH, width: this.widthW} // 设置截屏区域
						clip: {
							top: topT,
							left: leftL,
							height: heightH,
							width: widthW
						} // 设置截屏区域
					}
				);
				console.log(this.topT, this.leftL, this.heightH, this.widthW)
			},
			getPersentageH(p) {
				p = p / 100
				let h = uni.getSystemInfoSync().screenHeight
				return parseInt(h * p)
			},
			switchBtn() {
				this.open = !this.open;
				if (this.open) {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#box').boundingClientRect(data => {
							this.widthW = data.width + 'px';
							this.heightH = data.height + 'px';
							this.leftL = data.left + 'px';
							this.topT = data.top + 'px'
							uni.createVideoContext('jk').play();
							this.vstatus = true;
						}).exec();
					}, 1000)
				}
			},
			draw() {
				uni.createVideoContext('jk').pause();
				setTimeout(() => {
					this.toImage();
				}, 1000)

				return ''
				setTimeout(() => {
					let ctx = uni.createCanvasContext('myCanvas');

					ctx.drawImage(this.path, 0, 0, this.canvasW, this.canvasH);
					// VIP
					ctx.setFillStyle('#8D7700')
					ctx.font = `${uni.upx2px(22)}px Arial`;

					ctx.draw()


					uni.canvasToTempFilePath({
						x: 0,
						y: 0,
						width: this.canvasW,
						height: this.canvasH,

						canvasId: 'myCanvas',
						success: (res) => {
							// 在H5平台下，tempFilePath 为 base64
							console.log(res.tempFilePath)

							this.path = res.tempFilePath
							//保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: this.path,
								success: (res) => {
									uni.showToast({
										title: '保存成功'
									})
								},
								fail() {
									uni.showToast({
										icon: 'none',
										title: '保存名片码失败'
									})
								}
							})
						}
					})
				}, 1000)


			},

			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			select(e) {
				this.imgsrc = this.list[e].src,
					this.selIndex = e
			},
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},

			gocjwc() {
				uni.navigateTo({
					url: '/pages/cjwc/cjwc'
				})
			},
		},
		watch: {}
	}
</script>

<style>
	page {
		background: #171927;
	}

	.v-box {
		/* transform: rotate(270deg); */
		/* transform-origin: center; */
		margin: 0 auto;
		/* display: flex;
		align-items: center;
		justify-content: center; */
		/*width: 300rpx;*/
		/*height: 400rpx;*/
		/* height: 100%; */
		/*background: #fff;*/
		/*
    如果宽度固定高度自适应
    如果高度固定宽度自适应
    */
	}

	.v-box video {
		/* transform: rotate(90deg); */
		width: 75vh !important;
		height: 90vh !important;
		/* direction: -90 !important; */
	}
</style>
